const FILAS = 4;
const COLUMNAS = 5;

var modeloTabla;
var idMaximo;
var celdaSeleccionada;

inicio = function() {
	crearModeloTablaInicial();
	pintar();	
}

pintar = function() {
	pintarModeloTabla();
	pintarTablaSegunModelo();
}

colspanMasUno = function() {
	if (celdaSeleccionada == undefined)
		alert("Debe seleccionar una celda de la tabla.");
	else {
		var id = $(celdaSeleccionada).attr("id");
		// Buscamos la posición en el modelo del id y las dimensiones del cuadrado que ocupa
		var filaIni = FILAS + 1;
		var columnaIni = COLUMNAS + 1;
		var filaFin = -1;
		var columnaFin = -1;
		for (i=0; i<FILAS; i++) {
			for (j=0; j<COLUMNAS; j++) {
				if (modeloTabla[i][j] == id) {
					filaIni = Math.min(filaIni, i);
					columnaIni = Math.min(columnaIni, j);
					filaFin = Math.max(filaFin, i);
					columnaFin = Math.max(columnaFin, j);
				}
			}
		}
		// Si la columnaFin coincide con el número de columnas de la tabla no se puede ampliar el colspan
		if (columnaFin == COLUMNAS-1) return;
		// Recorremos la columna adyacente al cuadrado para modificar el colspan.
		for (var i=filaIni; i<=filaFin; i++) {
			var idAEliminar = modeloTabla[i][columnaFin+1];
			if (columnaFin+2 < COLUMNAS && modeloTabla[i][columnaFin+2] == idAEliminar) {
				// Tenemos que reemplaza id por nuevos ids en la columna columnaFin+1 ya que intersecamos un 'cuadrado'
				// Por arriba
				for (i2=filaIni; i2>=0; i2--) {
					if (modeloTabla[i2][columnaFin+1] == idAEliminar) {
						idMaximo++;
						modeloTabla[i2][columnaFin+1] == idMaximo;
					}
					else
						break;
				}
				// Por abajo
				for (i2=filaFin+1; i2<FILAS; i2++) {
					if (modeloTabla[i2][columnaFin+1] == idAEliminar) {
						idMaximo++;
						modeloTabla[i2][columnaFin+1] == idMaximo;
					}
					else
						break;
				}	
			}
			// Metemos el nuevo id
			modeloTabla[i][columnaFin+1] = id;
			// Si aquí hubiese desaparecido 'idAEliminar' de la tabla entonces la celda (i, columnaFin+1) deberia
			// absorber su contenido.
		}
		// Pintamos para ver cómo queda la cosa
		pintar();
	}
}

seleccionarCelda = function(elCelda) {
	if (celdaSeleccionada != undefined)
		celdaSeleccionada.classList.remove("seleccionada");
	celdaSeleccionada = elCelda;
	celdaSeleccionada.classList.add("seleccionada");
}

pintarTablaSegunModelo = function() {
	var html = "<table><caption>Tabla</caption>";
	for (var i=0; i<FILAS; i++) {
		html += "<tr>";
		for (var j=0; j<COLUMNAS; j++) {
			// Tratando celda i,j
			var idij = modeloTabla[i][j];
			// Comprobamos, primero, si hemos tratado ya o no la celda (por ser el contenido de una celda con rowspan o colspan)
			if (i==0 || modeloTabla[i-1][j] != idij) {
				// No pertenece a una celda anterior con un colspan que la englobe
				if (j==0 || modeloTabla[i][j-1] != idij) {
					// No pertenece a una celda anteriro con un rowspan que la englobe
					// colspan
					var colspan = 1;
					for (j2=j+1; j2<COLUMNAS; j2++) {
						if (modeloTabla[i][j2] == idij)
							colspan++;
						else
							break;					
					}
					// rowspan
					var rowspan = 1;
					for (i2=i+1; i2<FILAS; i2++) {
						if (modeloTabla[i2][j] == idij)
							rowspan++;
						else
							break;
					}
					//						
					html += "<td id=\"" + modeloTabla[i][j] + "\"";
					if (colspan > 1)
						html += " colspan=\"" + colspan + "\"";
					if (rowspan > 1)
						html += " rowspan=\"" + rowspan + "\"";
					html += " onclick=\"seleccionarCelda(this);\">" + modeloTabla[i][j] + "</td>";
				}
			}
		}
		html +="</tr>";
	}
	html += "</table>";
	$("#tabla").html(html);
}

pintarModeloTabla = function() {
	var html = "<table><caption>Modelo</caption>";
	for (var i=0; i<FILAS; i++) {
		html += "<tr>";
		for (var j=0; j<COLUMNAS; j++) {
			html += "<td>" + modeloTabla[i][j] + "</td>";	
		}
		html +="</tr>";
	}
	html += "</table>";
	$("#modelo_tabla").html(html);
}

crearModeloTablaInicial = function() {
	modeloTabla = new Array(FILAS);
	idMaximo = -1;
	for (var i=0; i<FILAS; i++) {
		var fila = new Array(COLUMNAS);
		modeloTabla[i] = fila;
		for (var j=0; j<COLUMNAS; j++) {
			idMaximo++;
			modeloTabla[i][j] = idMaximo;
		}
	}
}